<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList" :refresher-enabled="false" :default-page-size="20">
			<view class="bg-card">
				<view style="margin-top: 150rpx">
					<view class="tn-flex-column tn-m-xl tm-p-xl ">
						<text class=" tn-text-3xl tn-white_text">才风智慧移动端管理</text>
						<text class="tn-pt-sm tn-text-lg  tn-grey-light_text">随时随地，随心所欲</text>
					</view>
					<view class="tn-ml tn-mr">
						<tn-input v-model="searchName" size="lg" :custom-style="placeholderStyle" placeholder="请输入名称查询" @change="filterData" @confirm="filterData">
							<template #suffix>
								<view class="tn-ml tn-mr"><tn-icon name="search" color=" tn-gray_bg"></tn-icon></view>
							</template>
						</tn-input>
					</view>
					<view class="tn-p">
						<view v-for="(item, index) in dataList" :key="index" class="tn-mt" @click="cfsheep.$router.go('/pages/main/parkingLot/detail', item)">
							<view class="tn-shadow-md tn-p tn-white_bg tn-radius">
								<view class="tn-flex justify-start tn-text-xl tn-text-bold">{{ item.name }}</view>
								<view class="tn-flex justify-start  tn-mt-sm tn-text-lg tn-grey_text">{{ item.address }}</view>
								<view class="tn-flex justify-start tn-mt-sm tn-orange_text">
									{{ '收费标准：' + item.currentPrice + '元/' + (item.feeUnit == 0 ? '小时' : '次') }}
								</view>
								<view class="tn-flex justify-between  tn-mt-xl">
									<view>
										剩余车位：
										<text class="tn-blue_text tn-text-bold">{{ item.parkingSpaceNumber - item.usedParkingSpaceNumber }}</text>
										个
									</view>
									<view class="tn-text  "><tn-button shape="round" size="lg" bg-color="tn-blue" text-color="tn-white">查看车场</tn-button></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<template #loadingMoreNoMore>
				<view></view>
			</template>
		</z-paging>
		<tn-popup v-model="isBindPhone" width="90%" open-direction="bottom" @close="closeBindPhone"   :overlay-closeable="false">
			
			<view class="tn-m-sm tn-p-sm items-center">
				<view class="tn-mb-xl"><tn-title size="lg" title="手机号未绑定" mode="hLine" sub-title="VehicleType" assist-color="tn-orange" /></view>
				<tn-button :shadow="true" shadow-color="tn-grey" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" size="lg" width="100%" bg-color="tn-blue">
					绑定手机号
				</tn-button>
			</view>
		</tn-popup>
	</view>
</template>

<script setup lang="ts">
import {onMounted,  ref} from 'vue';
	import { onShow, onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
	import { showAuthModal } from "@/cfsheep/hooks/useModal";
	import cfsheep from "@/cfsheep";
	import CfCarParkUtil from "@/cfsheep/api/cfCarPark/park";

	const placeholderStyle = {backgroundColor:'#ffffff'}
	const isLogin = ref(false);
	const isBindPhone = ref(false);
	const changePhone = async ()=>{
		 let  userInfo = await cfsheep.$store("user").getInfo();
		console.log('userInfo',userInfo)
		  if(userInfo.phone){
			  isBindPhone.value = false
		  }

	}

	const closeBindPhone = ()=>{
		isBindPhone.value = false
	}
	// 使用微信手机号
	const getPhoneNumber= async (e)=> {
	  if (e.detail.errMsg !== 'getPhoneNumber:ok') {
	    return;
	  }
	  const result = await cfsheep.$platform.useProvider().bindUserPhoneNumber(e.detail);
	  if (result) {
	    cfsheep.$store('user').getInfo();
	    closeBindPhone();
	  }
	}

	const changeIsLogin = async () => {
		isLogin.value = cfsheep.$store("user").isLogin;
		if (!isLogin.value) {
			showAuthModal();
		}
		return isLogin.value;

	};


	const inputValue = ref('');
	const searchName = ref('');

	const filterData = ( ) => {

		paging.value.reload(true)
	};
	// z-paging 示例
	const paging = ref(null);
	// 数据列表
	const dataList: Ref<CfCarPark[]> = ref();

	/**
	 * 搜索停车列表
	 * @param pageNo
	 * @param pageSize
	 */
	const queryList = async (pageNo : number, pageSize : number) => {
		const _carParkList = await CfCarParkUtil.cfCarParkSearch({
		  page: pageNo,
		  size: pageSize,
		  name: searchName.value
		});
		if(_carParkList.code == 10002){
			paging.value.complete( _carParkList.data)
		}

	};

	onShow((options) => {
		changeIsLogin();
		changePhone();
	});
</script>

<style lang="scss" scoped>
.bg-card {
	background: linear-gradient(to bottom, #00aaff 15%, #d5efff);
	height: 38%;
	/* 高度设置为15% */
	border-radius: 0 0 10px 10px;
	/* 圆角 */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	/* 阴影 */
	position: absolute;
	/* 确保层级最低 */
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
}

.list-item {
	display: flex;
	align-items: center;
	/* 列表项之间的间距 */
	// padding: 10px 0; /* 增加上下内边距以增加高度 */
	// border-bottom: 1px solid rgba(151, 150, 150, 0.3); /* 添加底部边框线 */
	border-top: 1px solid rgba(151, 150, 150, 0.3);
	/* 添加底部边框线 */
}

.parking-name {
	flex: 1;
	/* 使停车场名称占据剩余空间 */
}
</style>
